<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">听到自己不用还贷<br/>而且还有高额报酬拿<br/>你心动了<br/>便答应了这份“兼职“</span>
      <span v-show="show1" class="span2 word">你用自己的身份信息<br/>在贷款平台上帮师兄借了两万元<br/>随后你也收到了一千块的报酬</span>
      <span v-show="show1" class="span3 word">师兄邀请你加入他们的团队<br/>每帮忙贷款一次<br/>你便能收取几百的提成</span>
      <span v-show="show1" class="span4 word">“多次合作”之后<br/>你对这样的高额回报产生依赖<br/>高消费的生活让你快乐</span>
      <span v-show="show1" class="span5 word">也正因如此<br/>你在40多个平台上借款<br/>总金额高达17多万元<br/>加上利息共44万元</span>
      <span v-show="show1" class="span6 word">当你正想找师兄还款<br/>师兄却一口咬定<br/>只是借了你的钱<br/>并没有指使你去贷款平台借钱</span>
      <span v-show="show1" class="span7 word">面对师兄的翻脸不认人<br/>你向找他理论<br/>却已经被对方拉黑</span>
      <span v-show="show1" class="span8 word">手机不断收到还债信息<br/>你不知道如何向家里人开口<br/>你看到对面的公安局<br/>你握紧手机走了过去</span>
      <span v-show="show1" class="span9 word">很遗憾！<br/>您没能通过本次情景模拟游戏<br/>可重复游玩逆天改命</span>
      <el-button v-show="show2" class="button" v-on:click="A">结束语</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 27000)
      setTimeout(() => {this.show2 = true}, 27000)
    },
    A() {
      this.$router.push("/learn/scene1-9")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 150px;
}

.span2{
  top: 180px;
  animation-delay: 3s;
}

.span3{
  top: 180px;
  animation-delay: 6s;
}

.span4{
  top: 180px;
  animation-delay: 9s;
}

.span5{
  top: 150px;
  animation-delay: 12s;
}

.span6{
  top: 180px;
  animation-delay: 15s;
}

.span7{
  top: 180px;
  animation-delay: 18s;
}

.span8{
  top: 150px;
  animation-delay: 21s;
}

.span9{
  top: 180px;
  animation-delay: 24s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>